<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport"
	content="width=device-width, initial-scale=1.0">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<%-- <link href="${request.pageContext.contextPath}/static/css/bootstrap.css"
	rel="stylesheet" media="screen">
<link
	href="${request.pageContext.contextPath}/static/css/bootstrap-responsive.css"
	rel="stylesheet" media="screen">
<script
	src="${request.pageContext.contextPath}/static/js/jquery-1.11.0.js"></script>
<script
	src="${request.pageContext.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${request.pageContext.contextPath}/static/js/holder.js"></script> --%>

<link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/holder/2.0/holder.min.js"></script>

<script type="text/javascript">
	$(function() {
		listUser();
		update();
	});

	var timer;
	function update() {
		timer = setInterval(listUser, 10000);
	}

	function listUser() {
		//先清空
		$('#tb1').empty();
		$.get('/json/listUser', function(data) {
			//data: 服务器返回的数据
			//如果服务器返回的是一个 json 字符串, 
			//会自动转换成对应的 javascript 对象或者数组.
			for (i = 0; i < data.userList.length; i++) {
				$("#tb1").append(
						'<tr><td>' + data.userList[i].id + '</td><td>'
								+ data.userList[i].firstName + '</td><td>'
								+ data.userList[i].email + '</td></tr>');
			}
		}, 'json');
	}
</script>
</head>
<body>

	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="#">Title</a>
			<ul class="nav">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>
	</div>

	<ul class="breadcrumb">
		<li><a href="#">首页</a> <span class="divider">/</span></li>
		<li><a href="#">Library</a> <span class="divider">/</span></li>
		<li class="active">Data</li>
	</ul>

	<ul class="thumbnails">
		<li class="span4"><a href="#" class="thumbnail"> <img
				src="holder.js/360x270" alt="">
		</a></li>
	</ul>

	<div class="alert alert-block">
		<button type="button" class="close" data-dismiss="alert">&times;</button>
		<h4>Warning!</h4>
		Best check yo self, you're not...
	</div>

	<h1>Hello, world!</h1>
	<ul class="the-icons">
		<li>
			aaaaaa<i class="icon-search"> </i> bbbbbbb
		</li>
	</ul>
	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3 bs-docs-sidebar">
				<ul class="nav nav-list nav-stacked">
					<li class=""><a href="#dropdowns">
							下拉菜单<i class="icon-chevron-right"></i></a></li>
					<li><a href="#buttonGroups"><i class="icon-chevron-right"></i>
							按钮组</a></li>
					<li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> 
							按钮下拉菜单</a></li>
					<li class=""><a href="#navs"><i class="icon-chevron-right"></i> 
							导航</a></li>
					<li class=""><a href="#navbar"><i class="icon-chevron-right"></i> 
							导航条</a></li>
					<li><a href="#breadcrumbs"><i class="icon-chevron-right"></i>
							面包屑</a></li>
					<li><a href="#pagination"><i class="icon-chevron-right"></i>
							分页</a></li>
					<li><a href="#labels-badges"><i class="icon-chevron-right"></i>
							标签与徽章</a></li>
					<li><a href="#typography"><i class="icon-chevron-right"></i>
							排版</a></li>
					<li><a href="#thumbnails"><i class="icon-chevron-right"></i>
							缩略图</a></li>
					<li><a href="#alerts"><i class="icon-chevron-right"></i>
							警告框</a></li>
					<li><a href="#progress"><i class="icon-chevron-right"></i>
							进度条</a></li>
					<li><a href="#media"><i class="icon-chevron-right"></i>
							媒体对象</a></li>
					<li><a href="#misc"><i class="icon-chevron-right"></i>
							Misc</a></li>
				</ul>
			</div>
			<div class="span9">
				<table class="table table-hover">
					<thead>
						<tr>
							<td>编号</td>
							<td>姓</td>
							<td>邮箱</td>
						</tr>
					</thead>
					<tbody id="tb1">
						<%-- <c:forEach items="${userList}" var="user" varStatus="status">
							<tr>
								<td>${status.count}</td>
								<td>${user.id}</td>
								<td>${user.firstName}</td>
							</tr>
						</c:forEach> --%>
					</tbody>
				</table>
			</div>
		</div>
	</div>

</body>
</html>